<template>
    <div class="character-detail-container">
        <!-- 加载中或出错时的提示 -->
        <div v-if="isLoading">加载中...</div>
        <div v-else-if="errorMessage" class="text-red-500">{{ errorMessage }}</div>

        <!-- 当角色数据加载成功时显示的内容 -->
        <template v-else>
            <!-- 返回按钮 + 角色名称 -->
            <el-page-header @back="$router.go(-1)" content-class="flex items-center">
                <template #content>
                    <span class="ml-4 text-xl font-semibold">{{ character.name }}</span>
                </template>
            </el-page-header>

            <!-- 角色图片 -->
            <el-card class="character-card shadow-md rounded-lg overflow-hidden mt-6">
                <el-image :src="character.image_url" fit="cover" lazy class="w-full h-64 object-cover" />
            </el-card>

            <!-- 基础信息 -->
            <el-card class="character-card shadow-md rounded-lg overflow-hidden mt-6">
                <template #header>
                    <h3 class="text-lg font-medium">基础信息</h3>
                </template>
                <div class="px-2">
                    <el-descriptions :column="1" border size="small">
                        <el-descriptions-item label="创建时间">
                            {{ formatDate(character.created_at) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="最后更新">
                            {{ formatDate(character.updated_at) }}
                        </el-descriptions-item>
                        <el-descriptions-item label="人气值">
                            <el-tag type="success" size="small">{{ character.popularity }}</el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-card>

            <!-- 背景故事 -->
            <el-card class="character-card shadow-md rounded-lg overflow-hidden mt-6">
                <template #header>
                    <h3 class="text-lg font-medium">背景故事</h3>
                </template>
                <div class="prose max-w-none p-4" v-html="markdownToHtml(character.background)" />
            </el-card>

            <!-- 角色设定 -->
            <el-card class="character-card shadow-md rounded-lg overflow-hidden mt-6">
                <template #header>
                    <h3 class="text-lg font-medium">角色设定</h3>
                </template>
                <el-descriptions :column="2" border size="small" class="p-4">
                    <el-descriptions-item v-for="(value, key) in character.preferences" :key="key" :label="key">
                        {{ value }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </template>
    </div>

     <!-- 评论区模块 -->
<div class="comment-section">
  <div class="section-header">
    <el-icon class="comment-icon"><ChatLineSquare /></el-icon>
    <h2 class="section-title">用户评论区</h2>
  </div>
  
  <div class="section-decorator">
    <div class="decorator-line"></div>
    <el-tag type="info" effect="dark" size="small">畅所欲言</el-tag>
    <div class="decorator-line"></div>
  </div>
    <characterCommentList
    :characterId="characterId"
  />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import { useCharacterStore } from '@/stores/characterStore'
import characterCommentList from '@/components/characterCommentList/index.vue'
import { ChatLineSquare } from '@element-plus/icons-vue'

const route = useRoute()
const characterStore = useCharacterStore()

const props = defineProps({
  id: {
    type: [Number, String],
    required: true
  }
})

const characterId = ref(props.id)
// 格式化日期
const formatDate = (dateStr) => {
    return new Date(dateStr).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    })
}

// Markdown 转 HTML 并净化
const markdownToHtml = (md) => {
    const cleanHtml = DOMPurify.sanitize(marked(md || ''))
    return cleanHtml
}

// 计算属性获取角色详情
const character = computed(() => characterStore.character)
const isLoading = computed(() => characterStore.isLoading)
const errorMessage = computed(() => characterStore.error)

// 获取角色数据
onMounted(async () => {
    try {
        await characterStore.getCharacterById(route.params.id)
    } catch (error) {
        console.error('Failed to load character:', error.message)
    }
})
</script>

<style scoped>
.character-detail-container {
    padding: 2rem;
    max-width: 100rem;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .character-detail-container {
        padding: 1rem;
    }
}

/* 评论区容器 */
.comment-section {
  margin: 40px 0;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  background: #f8f9fa;
}

/* 头部样式 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.comment-icon {
  font-size: 24px;
  color: var(--el-color-primary);
  margin-right: 10px;
}

.section-title {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

/* 装饰分隔线 */
.section-decorator {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.decorator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dcdfe6, transparent);
}

.el-tag {
  margin: 0 15px;
  transform: translateY(-1px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .comment-section {
    margin: 20px -15px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .section-title {
    font-size: 18px;
  }
}
</style>